<template>
	<section class="bg-gray-50 pt-3">
		<div class="px-[15%]">
			<div class="mb-2 md:mb-4" data-sa data-sa-delay="0">
				<h2 class="text-base md:text-[1rem] font-bold text-gray-900 text-left leading-tight">能做什么</h2>
			</div>

			<div class="grid grid-cols-1 md:grid-cols-3 gap-y-[1rem] gap-x-[1.6rem]">
				<div v-for="(item, index) in cards" :key="item.title + index"
					class="relative overflow-hidden shadow-md group" :style="{ backgroundImage: `url(${item.bg})` }"
					data-sa :data-sa-delay="index * 60">
					<div
						class="absolute inset-0 bg-gray-800/80 group-hover:bg-gray-800/70 transition-colors duration-200">
					</div>
					<div class="relative flex flex-col items-center justify-center text-white aspect-[2/1.8]">
						<div class="w-16 h-16 mb-6 flex items-center justify-center">
							<svg viewBox="0 0 64 64" class="w-16 h-16 text-white">
								<g fill="none" stroke="currentColor" stroke-width="2">
									<path v-for="(d, i) in item.icon" :key="i" :d="d" stroke-linecap="round"
										stroke-linejoin="round" />
								</g>
								<circle v-if="item.red" v-for="(c, i) in item.red" :key="'r'+i" :cx="c[0]" :cy="c[1]"
									:r="c[2]" fill="#ef4444" />
							</svg>
						</div>
						<div class="text-center">
							<div class="text-xl md:text-2xl font-semibold mb-2">{{ item.title }}</div>
							<div class="text-sm tracking-widest text-gray-300">{{ item.subtitle }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup>
	import bg1 from '@/assets/images/bg_2.jpg'
	import bg2 from '@/assets/images/bg_1.webp'

	const cards = [{
			title: '广告设计',
			subtitle: 'ADVERTISEMENT',
			bg: bg1,
			icon: [
				'M10 20h44v24H10z',
				'M18 28h12',
				'M18 36h8'
			],
			red: [
				[26, 28, 2]
			]
		},
		{
			title: '宣传影片',
			subtitle: 'FILM',
			bg: bg2,
			icon: [
				'M22 32a10 10 0 1 0 20 0 10 10 0 1 0 -20 0z',
				'M42 24l10 6-10 6z'
			],
			red: [
				[32, 26, 2],
				[28, 32, 2],
				[36, 32, 2],
				[32, 38, 2]
			]
		},
		{
			title: '商业拍摄',
			subtitle: 'PHOTOGRAPH',
			bg: bg1,
			icon: [
				'M14 26h36l-4 20H18z',
				'M22 24l4-6h12l4 6',
				'M32 36a8 8 0 1 0 0.001 0'
			],
			red: [
				[32, 36, 2]
			]
		},
		{
			title: '创新设计',
			subtitle: 'CREATIVE',
			bg: bg2,
			icon: [
				'M32 14a12 12 0 0 0-8 20c2 2 4 4 4 8h8c0-4 2-6 4-8a12 12 0 0 0-8-20z',
				'M26 46h12',
				'M28 50h8'
			],
			red: [
				[24, 34, 2]
			]
		},
		{
			title: '公关活动',
			subtitle: 'PR ACTIVITY',
			bg: bg1,
			icon: [
				'M24 42a8 8 0 1 0 16 0v-6H24z',
				'M32 20v10'
			],
			red: [
				[32, 34, 2]
			]
		},
		{
			title: '更多服务',
			subtitle: 'MORE SERVICE',
			bg: bg2,
			icon: [
				'M16 24h32v24H16z',
				'M24 32h16'
			],
			red: []
		}
	]
</script>